<div class="mt-20 clearfix">
  <h2 class={{concat "pt-30 inline-block " (if (and disabled (not-eq targetType "fluentForwarder")) "text-muted")}}>
    {{t "loggingPage.ssl.sslHeader" authType=(if (eq targetType "syslog") "Encryption" "SSL") }}
  </h2>
  {{#if (and (not-eq targetType "kafka") (not-eq targetType "fluentForwarder"))}}
    <span class="text-info text-small">
      {{t "loggingPage.ssl.headerHelp"}}
    </span>
  {{/if}}
  <hr/>

  {{#if (eq targetType "syslog")}}
    <div class="row">
      <div class={{concat "col span-6 pt-0 " (if isUdp "text-muted")}}>
        {{input
          type="checkbox"
          classNames="form-control"
          checked=config.enableTls
          disabled=isUdp
        }}
        {{t "loggingPage.fluentd.enableTls.label"}}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "loggingPage.ssl.verify.label"}}
        </label>
        <div class="radio">
          <label class={{if (or disabled isUdp) "text-muted"}}>
            {{radio-button
              selection=config.sslVerify
              value=false
              disabled=(or disabled isUdp)
            }}
            {{t "loggingPage.ssl.verify.disabled"}}
          </label>
        </div>
        <div class="radio">
          <label class={{if (or disabled isUdp) "text-muted"}}>
            {{radio-button
              selection=config.sslVerify
              value=true
              disabled=(or disabled isUdp)
            }}
            {{t "loggingPage.ssl.verify.enabled"}}
          </label>
        </div>
        {{#if sslVerify}}
          <div class="clearfix">
            <label class="acc-label pt-5">
              {{t "loggingPage.ssl.certificate.label"}}
            </label>
          </div>
          {{input-text-file
            classNames="box"
            value=config.certificate
            multiple=true
            canChangeName=false
            accept="application/x-x509-ca-cert,text/plain,.pem,.crt,.cert"
            minHeight=60
            placeholder="newCertificate.cert.placeholder"
            shouldChangeName=false
            disabled=(or disabled isUdp)
          }}
        {{/if}}
      </div>
    </div>
  {{/if}}

  {{#if (and (not-eq customType "fluentd") (not-eq targetType "fluentForwarder"))}}
    <div class="row">
      <div class="col span-6 mt-0">
        <div class="clearfix">
          <label class="acc-label pt-5">
            {{t "loggingPage.ssl.clientKey.label"}}
          </label>
        </div>
        {{input-text-file
          classNames="box"
          value=config.clientKey
          canChangeName=false
          accept="text/plain,.pem,.pkey,.key"
          minHeight=60
          placeholder="newCertificate.key.placeholder"
          shouldChangeName=false
          disabled=disabled
        }}
        {{#if clientKeyPath}}
          <p class="help-block">
            {{clientKeyPath}}
            {{copy-to-clipboard
              clipboardText=clientKeyPath
              size=small
              buttonClass="p-0"
            }}
          </p>
        {{/if}}
      </div>
      <div class="col span-6 mt-0">
        <div class="clearfix">
          <label class="acc-label pt-5">
            {{t "loggingPage.ssl.clientCert.label"}}
          </label>
        </div>
        {{input-text-file
          classNames="box"
          value=config.clientCert
          multiple=true
          canChangeName=false
          accept="application/x-x509-ca-cert,text/plain,.pem,.crt,.cert"
          minHeight=60
          placeholder="newCertificate.cert.placeholder"
          shouldChangeName=false
          disabled=disabled
        }}
        {{#if clientCertPath}}
          <p class="help-block">
            {{clientCertPath}}
            {{copy-to-clipboard
              clipboardText=clientCertPath
              size=small
              buttonClass="p-0"
            }}
          </p>
        {{/if}}
      </div>
    </div>
  {{/if}}

  {{#if (or (eq targetType "splunk") (eq targetType "elasticsearch"))}}
    <div class="row">
      {{#if (or (eq targetType "splunk") (eq targetType "elasticsearch"))}}
        <div class="col span-6">
          <label class="acc-label">
            {{t "loggingPage.ssl.clientKeyPass.label"}}
          </label>
          {{input
            type="password"
            value=config.clientKeyPass
            className="form-control"
            placeholder=(t "loggingPage.ssl.clientKeyPass.password.placeholder")
            disabled=disabled
          }}
          {{#if (eq targetType "elasticsearch")}}
            <label class="acc-label pt-5">
              {{t "loggingPage.ssl.sslVersion.label"}}
            </label>
            {{searchable-select
              classNames="form-control"
              content=sslVersionContent
              value=config.sslVersion
              readOnly=disabled
            }}
          {{/if}}
        </div>
      {{/if}}
      <div class="col span-6">
        <label class="acc-label">
          {{t "loggingPage.ssl.verify.label"}}
        </label>
        <div class="radio">
          <label class={{if disabled "text-muted"}}>
            {{radio-button
              selection=config.sslVerify
              value=false
              disabled=disabled
            }}
            {{t "loggingPage.ssl.verify.disabled"}}
          </label>
        </div>
        <div class="radio">
          <label class={{if disabled "text-muted"}}>
            {{radio-button
              selection=config.sslVerify
              value=true
              disabled=disabled
            }}
            {{t "loggingPage.ssl.verify.enabled"}}
          </label>
        </div>
        {{#if sslVerify}}
          <div class="clearfix">
            <label class="acc-label pt-5">
              {{t "loggingPage.ssl.certificate.label"}}
            </label>
          </div>
          {{input-text-file
            classNames="box"
            value=config.certificate
            multiple=true
            canChangeName=false
            accept="application/x-x509-ca-cert,text/plain,.pem,.crt,.cert"
            minHeight=60
            placeholder="newCertificate.cert.placeholder"
            shouldChangeName=false
            disabled=disabled
          }}
        {{/if}}
      </div>
    </div>
  {{/if}}

  {{#if (or (eq targetType "kafka") (eq targetType "customTarget"))}}
    <div class="row">
      <div class="col span-6 mt-0">
        <div class="clearfix">
          <label class="acc-label pt-5">
            {{t "loggingPage.ssl.certificate.label"}}
          </label>
        </div>
        {{input-text-file
          classNames="box"
          value=config.certificate
          multiple=true
          canChangeName=false
          accept="application/x-x509-ca-cert,text/plain,.pem,.crt,.cert"
          minHeight=60
          placeholder="newCertificate.cert.placeholder"
          shouldChangeName=false
          disabled=disabled
        }}
        {{#if certificatePath}}
          <p class="help-block">
            {{certificatePath}}
            {{copy-to-clipboard
              clipboardText=certificatePath
              size=small
              buttonClass="p-0"
            }}
          </p>
        {{/if}}
      </div>
    </div>
  {{/if}}

  {{#if (eq targetType "fluentForwarder")}}
    <div class="row">
      <div class="col span-6 pt-0">
        {{input
          type="checkbox"
          classNames="form-control"
          checked=config.enableTls
        }}
        {{t "loggingPage.fluentd.enableTls.label"}}
      </div>
    </div>
    <div class="row">
      <div class="col span-6 mt-0">
        <div class="clearfix">
          <label class="acc-label pt-5">
            {{t "loggingPage.ssl.clientKey.label"}}
          </label>
        </div>
        {{input-text-file
          classNames="box"
          value=config.clientKey
          canChangeName=false
          accept="text/plain,.pem,.pkey,.key"
          minHeight=60
          placeholder="newCertificate.key.placeholder"
          shouldChangeName=false
          disabled=disabled
        }}
      </div>
      <div class="col span-6 mt-0">
        <div class="clearfix">
          <label class="acc-label pt-5">
            {{t "loggingPage.ssl.clientCert.label"}}
          </label>
        </div>
        {{input-text-file
          classNames="box"
          value=config.clientCert
          multiple=true
          canChangeName=false
          accept="application/x-x509-ca-cert,text/plain,.pem,.crt,.cert"
          minHeight=60
          placeholder="newCertificate.cert.placeholder"
          shouldChangeName=false
          disabled=disabled
        }}
      </div>
    </div>
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "loggingPage.ssl.clientKeyPass.label"}}
        </label>
        {{input
          type="password"
          value=config.clientKeyPass
          className="form-control"
          placeholder=(t "loggingPage.ssl.clientKeyPass.password.placeholder")
          disabled=disabled
        }}
      </div>
      <div class="col span-6 pt-0">
        <label class="acc-label">
          {{t "loggingPage.ssl.verify.label"}}
        </label>
        <div class="radio">
          <label class={{if (or disabled isUdp) "text-muted"}}>
            {{radio-button
              selection=config.sslVerify
              value=false
              disabled=(or disabled isUdp)
            }}
            {{t "loggingPage.ssl.verify.disabled"}}
          </label>
        </div>
        <div class="radio">
          <label class={{if (or disabled isUdp) "text-muted"}}>
            {{radio-button
              selection=config.sslVerify
              value=true
              disabled=(or disabled isUdp)
            }}
            {{t "loggingPage.ssl.verify.enabled"}}
          </label>
        </div>
        {{#if sslVerify}}
          <div class="clearfix">
            <label class="acc-label pt-5">
              {{t "loggingPage.ssl.certificate.label"}}
            </label>
          </div>
          {{input-text-file
            classNames="box"
            value=config.certificate
            multiple=true
            canChangeName=false
            accept="application/x-x509-ca-cert,text/plain,.pem,.crt,.cert"
            minHeight=60
            placeholder="newCertificate.cert.placeholder"
            shouldChangeName=false
            disabled=(or disabled isUdp)
          }}
        {{/if}}
      </div>
    </div>
  {{/if}}
</div>
